<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <label class="el-form-item-label">任务名称</label>
        <el-input
          v-model="query.name"
          clearable
          placeholder="任务名称"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">创建时间</label>
        <el-input
          v-model="query.createTime"
          clearable
          placeholder="创建时间"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!--预览表单-->
      <el-dialog :visible.sync="dialogVisible" width="80%">
        <el-image
          style="width: 100%; height: 100%"
          :src="imageurl"
          fit="none"
        />
      </el-dialog>
      <!--流程明细-->
      <el-dialog
        :visible.sync="processDetailVisible"
        title="流程明细"
        width="70%"
      >
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="executionId" label="任务ID" width="180" />
          <el-table-column prop="name" label="任务名称" width="180" />
          <el-table-column prop="assignee" label="执行人" />
          <el-table-column prop="procInstId" label="实例ID" width="180" />
          <el-table-column prop="startTime" label="发起时间" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--流程改派-->
      <el-dialog
        :visible.sync="reassignmentVisible"
        title="流程改派"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="被改派人" prop="assignee" style="width: 370px">
            <el-select
              v-model="assignee"
              style="width: 370px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.username"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.cu === 2"
            type="primary"
            @click="reassignment()"
          >确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="executionId" label="任务ID" />
        <el-table-column prop="procInstId" label="流程实例ID" />
        <el-table-column prop="name" label="任务名称" />
        <el-table-column prop="claimTime" label="任务提醒时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.claimTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="suspensionState" label="任务状态">
          <template slot-scope="scope">
            <span v-if="scope.row.suspensionState == 1">激活</span>
            <span v-else>挂起</span>
          </template>
        </el-table-column>
        <el-table-column prop="assigneeName" label="办理人" />
        <el-table-column prop="ownerName" label="持有者" />
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-permission="['admin', 'actRuTask:edit', 'actRuTask:del']"
          label="操作"
          width="300px"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip content="签收" placement="top">
              <el-button
                v-if="scope.row.assignee == null"
                v-permission="['admin', 'actRuTask:edit']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="signFor(scope.row)"
              ><i
                class="el-icon-edit"
              /></el-button>
            </el-tooltip>
            <el-tooltip content="办理" placement="top">
              <el-button
                v-if="scope.row.assignee != null"
                v-permission="['admin', 'actRuTask:edit']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="approve(scope.row)"
              ><i
                class="el-icon-thumb"
              /></el-button>
            </el-tooltip>
            <el-tooltip content="流程改派" placement="top">
              <el-button
                v-if="scope.row.assignee != null"
                v-permission="['admin', 'actRuTask:edit']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="reassignment(scope.row)"
              ><i
                class="el-icon-user"
              /></el-button>
            </el-tooltip>
            <el-tooltip content="流程明细" placement="top">
              <el-button
                v-permission="['admin', 'actRuTask:detail']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="detail(scope.row)"
              ><i
                class="el-icon-s-order"
              /></el-button>
            </el-tooltip>
            <el-tooltip content="查看流程图" placement="top">
              <el-button
                v-permission="['admin', 'actRuTask:viewImage']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="viewImage(scope.row)"
              ><i
                class="el-icon-view"
              /></el-button>
            </el-tooltip>
            <el-tooltip content="流程回退" placement="top">
              <el-button
                v-permission="['admin', 'actReProcdef:edit']"
                style="margin-left: -2px;"
                type="primary"
                size="small"
                @click="rollBack(scope.row)"
              ><i
                class="el-icon-refresh-left"
              /></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <!--表单渲染：打开一个页面，引入组件进行显示-->
      <el-dialog
        :visible.sync="dialogVisible"
        width="90%"
        center
        :before-close="handleClose"
      >
        <!--如何显示其他页面，如何面对众多的页面-->
        <p style="width:700px;height:500px;">这是一段信息</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import activiti from '@/api/workflow/activiti'
import crudActRuTask from '@/api/workflow/actRuTask'
import crudActReProcdef from '@/api/workflow/actReProcdef'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'

const defaultForm = {
  id: null,
  rev: null,
  executionId: null,
  procInstId: null,
  procDefId: null,
  name: null,
  parentTaskId: null,
  description: null,
  taskDefKey: null,
  owner: null,
  assignee: null,
  delegation: null,
  priority: null,
  createTime: null,
  dueDate: null,
  category: null,
  suspensionState: null,
  tenantId: null,
  formKey: null,
  claimTime: null
}
export default {
  name: 'ActRuTask',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '待办任务',
      url: 'api/actRuTask',
      idField: 'id',
      sort: 'ID_,desc',
      crudMethod: { ...crudActRuTask }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'actRuTask:add'],
        edit: ['admin', 'actRuTask:edit'],
        del: ['admin', 'actRuTask:del'],
        detail: ['admin', 'actRuTask:detail'],
        viewImage: ['admin', 'actRuTask:viewImage']
      },
      rules: {
        id: [{ required: true, message: '主键不能为空', trigger: 'blur' }]
      },
      queryTypeOptions: [
        { key: 'name', display_name: '任务名称' },
        { key: 'createTime', display_name: '创建时间' }
      ],
      userOptions: [],

      // 任务被委托人
      assignee: '',
      tableData: [],
      // 预览表单控制
      dialogVisible: false,
      // 流程明细弹出框
      processDetailVisible: false,
      // 流程改派弹出框
      reassignmentVisible: false,
      formJsonData: null,
      imageurl: '',
      // 是否显示办理页面
      dialogVisible: false
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    /**
     * 办理
     * 1、根据任务，获取到相关流程配置的form表单
     * 2、判断表单类型，如果是绘制的，则跳转公共页面渲染，如果定制的，跳转到定制页面url
     */
    approve(row) {
      // TODO 打开任务表单页面
      // console.log(row)
      const data = { taskId: '', result: null }
      data.taskId = row.id
      data.result = 'agree'
      console.log(row)

      this.dialogVisible = true

      // activiti
      //   .approve(data)
      //   .then(res => {
      //     this.crud.notify("任务办理成功", CRUD.NOTIFICATION_TYPE.SUCCESS);
      //     this.crud.refresh();
      //   })
      //   .catch(() => {});
    },
    /**
     * 流程明细
     */
    detail(row) {
      this.processDetailVisible = true
      activiti
        .processDetail(row.procInstId)
        .then(res => {
          this.tableData = res
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 查看流程图
     */
    viewImage(row) {
      this.dialogVisible = true
      // 读取文件流
      crudActReProcdef
        .viewProcessTrace(row.procInstId)
        .then(res => {
          const url = window.URL.createObjectURL(res)
          this.imageurl = url
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 签收任务
     */
    signFor(row) {
      activiti
        .signFor(row.id)
        .then(res => {
          this.crud.notify('任务签收成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          // 重新检索
          this.crud.refresh()
        })
        .catch(() => {})
    },
    /**
     * 流程回退
     */
    rollBack(row) {
      activiti
        .rollBack(row.id)
        .then(res => {
          this.crud.notify('流程回退成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
        .catch(() => {})
    },
    /**
     * 流程改派
     */
    reassignment(row) {
      this.reassignmentVisible = true
      // 加载用户信息
      console.log(row)
    }
  }
}
</script>

<style scoped></style>
